/* ======================================================================= */
/* HELPERS
/* ======================================================================= */

/* ----- nomargin ----- */

.nomargin{
	margin: 0;
}

/* ----- margin ----- */

.margin{
	display: block;
	width: 100%;
	height: 20px;
}

.margin-nano{
	height: 5px;
}

.margin-micro{
	height: 10px;
}

.margin-macro{
	height: 30px;
}

/* ----- hmargin ----- */

.hmargin{
	display: block;
	width: 20px;
	height: 0;
}

.hmargin-nano{
	width: 5px;
}

.hmargin-micro{
	width: 10px;
}

.hmargin-macro{
	width: 30px;
}

/* ----- color ----- */

.color{
	color: $primary_color;
}

.dark{
	color: $secondary_color;
}

.light{
	color: $light_color;
}

.white{
	color: #fff;
}

.color-bg{
	color: #fff;
	background-color: $primary_color;
}

.dark-bg{
	color: #fff;
	background-color: $secondary_color;
}

.light-bg{
	background-color: $light_color;
}

.white-bg{
	background-color: #fff;
}

.color-bg,
.dark-bg,
.light-bg,
.white-bg{
	padding: 0 0.3em;
}

/* ----- iblock ----- */

.iblock{
	float: none;
	display: inline-block;
}

/* ----- vcenter ----- */

.vcenter{
	display: table;
	width: 100%;
	height: 100%;

	.vcenter-content{
		display: table-cell; 
		vertical-align: middle;

		& > *{
			display: inline-block; 
			vertical-align: middle;
		}
	}
}